<template>
	<view class="productDetail">
		<uni-swiper-dot :info="info.covers" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" interval="3000" duration="500" circular="true" autoplay="true">
				<swiper-item v-for="(item, index) in info.covers" :key="index">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill">
						</image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="info">
			<view class="top">
				<view class="pic">
					<text>{{'￥'+info.price}}</text>
				</view>
				<view class="title">{{info.name}}</view>
				<view class="sketch">{{info.sketch}}</view>
				<button  class="share" open-type="share">
					<image :src="obtainImgUrl('icon/icon29.png')" mode="aspectFill"></image>
					<text>分享</text>
				</button>
			</view>
		</view>
		
		<view class="content">
			<view class="content_title">礼品卡详情</view>
			<view class="details" v-html="info.intro"></view>
		</view>
		
		<view class="bottom">
			<view class="car" @click="previewImage(info.serviceImg,1)" style="margin-left: 30rpx;">
				<uni-icons type="chatboxes" color="#666666" size="22"></uni-icons>
				<text>客服</text>
			</view>
			<view class="car" @click="jump('cart')">
				<uni-icons :type="cartNum>0?'cart-filled':'cart'" :color="cartNum>0?'#ffcc00':'#666666'" size="22"></uni-icons>
				<text>购物车</text>
				<view class="carnum" v-if="cartNum>0">{{cartNum}}</view>
			</view>
			<view class="car" @click="collectThis()">
				<uni-icons :type="info.myCollect == 1?'star-filled':'star'" :color="info.myCollect == 1?'#ffcc00':'#666666'" size="22"></uni-icons>
				<text>收藏</text>
			</view>
			<view class="right">
				<view class="add" @click="open('addCart')">加入购物车</view>
				<view class="pay" @click="open('subOrder')">立即购买</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" @touchmove.stop.prevent="moveHandle">
			<view class="popup" >
				<image @click="close" class="close" :src="obtainImgUrl('icon/close.png')" mode="aspectFill"></image>
				<view class="goods_info">
					<image :src="selAttr.picture" mode="aspectFill"></image>
					<view class="right">
						<text>{{(selAttr.price > 0 ? '￥'+selAttr.price : '')}}</text>
						<view class="goods_num" v-if="selAttr.stock > 0">
							<text>库存：{{selAttr.stock}}件</text>
						</view>
					</view>
				</view>
				<view class="goods_num1">
					<text>购买数量</text>
					<view class="uni-numbox">  
						<view class="uni-numbox-minus" :class="disableSubtract ? '' : 'uni-numbox-disabled'" @click="_calcValue('subtract')">-</view>  
						<input class="uni-numbox-value" type="number" :value="inputValue" @blur="_onBlur">  
						<view class="uni-numbox-plus" :class="disableAdd ? '' : 'uni-numbox-disabled'" @click="_calcValue('add')">+</view>
					</view>  
				</view>
				<view  @click="subSel()" class="goods_bot">选好了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
	import ShareIndex from '../../static/share.js';
	import {Base64} from '../../static/base64.min.js';
	export default { 
		mixins: [ShareIndex],
		data() {
			return {
				mode: 'round',
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,0.3)',
					selectedBackgroundColor: '#FFC600',
					selectedBorder: '1px rgba(255,198,0,1) solid',
					border: '1px rgba(255,255,255,0.3) solid',
					selectedBorder: '1px rgba(255,198,0,1) solid'
				}, //轮播图样式配置
				
				id : 0,
				info: {
					minSkuPrice: 0,
					maxSkuPrice : 0,
					market_price: 0,
					name: '商品名称',
					sales: 0,
					stock: 0,
					collect_num: 0,
					intro: '',
					recommendList: [],
				},
				nowType: '',
				step: 1,
				cartNum: 0,
				inputValue : 1,
				selAttrValName : '选择',
				disableAttrList : true,
				disableSubtract : true,
				disableAdd : true,
				selAttr: {
					picture: '',
					price: '',
					stock: 0,
				},
			}
		}, 
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			
			//预览图片
			previewImage:function(image,index){
				//var current = e.target.dataset.src
				//console.log(image);
				//此方法传图片地址要数组的形式，所以定义一个数组，然后将内容push进去，再去做图片预览
				var arr = [];
				arr.push(image);
				uni.previewImage({
					current: 0,
					urls: arr
				})
			},
			
			_calcValue(type) {  
				const scale = 1;  
				let value = this.inputValue;  
				let step = this.step * scale; 
				if (type === 'subtract') {  
					value -= step  
				} else if (type === 'add') {  
					value = parseInt(Number(value) + Number(step))
				}  
				if (value < this.min) {  
					return  
				}  
				if(value == 1) {
					this.disableSubtract = false;
				}
				this.inputValue = value;  
			},  
			_getDecimalScale() {  
				let scale = 1;  
				// 浮点型  
				if (~~this.step !== this.step) {  
					scale = Math.pow(10, (this.step + '').split('.')[1].length);  
				}  
				return scale;  
			},  
			_onBlur(event) {  
				let value = event.detail.value;  
				if (!value) {  
					this.inputValue = 1;  
					return  
				}  
				value = +value;
				if (value < 1) {  
					value = 1  
				}  
				if(value == 1) {
					this.disableSubtract = false;
				}
				this.inputValue = value  
			},
			open(type) {
				this.nowType = type;
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			collectThis(){
				if(uni.getStorageSync('access-token') == '') {
					this.jump('login');
					return ;
				}
				serve.request({
			        url: '/common/collect/operate',
			        data: {
			            type: 'card',
			            id : this.id
			        }
			    }).then(res => {
			        uni.showToast({
			            title: res.message,
			            icon : 'none'
			        });
			        if(res.code == 200) {
			            this.info.myCollect = this.info.myCollect == 1 ? 0 : 1;
			        }
			    });
			},
			getInfo() {
				let that = this;
				serve.request({
                    url: '/store/index/card-view',
                    data: {
                        id: this.id
                    }
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                            title: res.message,
                            icon : 'none',
                            success:function(){ 
                                setTimeout(function () { 
                                    that.jump('card_list')
                                }, 2000) 
                            } 
                        });
                        return;
                    }
                    this.info = res.data;
                    this.info.intro = Base64.decode(res.data.intro).replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
					this.selAttr.picture = this.info.picture;
					this.selAttr.price = this.info.price;
					this.selAttr.stock = this.info.stock;
                    this.shareItem.title = this.info.name;
                    this.shareItem.imageUrl = this.info.picture;
					this.shareItem.path = '/pages/store/cardDetail?id='+this.info.id+'&shanhaiKey='+uni.getStorageSync('shanhaiKey');
					this.shareItem.linePaht = '/pages/store/cardDetail';
					this.shareItem.query = 'id='+this.info.id+'&shanhaiKey='+uni.getStorageSync('shanhaiKey');
                });
			},
			addCart() {
				if(uni.getStorageSync('access-token') == '') {
					this.jump('login');
					return ;
				}
				serve.request({
			        url: '/member/cart-item/add-card',
			        data: {
			            'cardId': this.id,
			            num: this.inputValue
			        }
			    }).then(res => {
			        uni.showToast({
			            title: res.message,
			            icon : 'none'
			        });
			        if(res.code == 200) {
			            this.getCartNum();
			        }
			    });
			},
			getCartNum() {
				if(uni.getStorageSync('access-token') == '') {
					return ;
				}
				serve.request({
                    url: '/store/index/cart-num',
                    data: {}
                }).then(res => {
                    this.cartNum = res.data.num;
                });
			},
			subSel() {
				if(uni.getStorageSync('access-token') == '') {
					this.jump('login');
					return ;
				}
				this.close();
				if(this.nowType == 'addCart') {
					this.addCart();
					return ;
				} 
				this.jump('confirmCart', 'cardId='+this.id+'&num='+this.inputValue);
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.id = options.id || 0;
			if(options.q) {
				var link = decodeURIComponent(options.q);
				var paramArr = link.split('=');
				this.id = paramArr[1];
			} 
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('card_list')
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.productDetail {
		padding-bottom: 120rpx;
        .pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			// padding-bottom: 140rpx;
			.close{
				position: absolute;
				width:32rpx;
				height:32rpx;
				right: 40rpx;
				top: 45rpx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				border-bottom: 1rpx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50rpx 0rpx 20rpx;
				font-size: 26rpx;
				text:last-child{
					color: rgba(255, 200, 10, 1);
					font-size: 32rpx;
					font-weight: bold;
					margin-top: 10rpx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				border-bottom: 1rpx rgba(251, 251, 253, 1) solid;
				image{
					width: 40rpx;
					height: 40rpx;
				}
			}
		    .pay_bot {
		      width: 100%;
		      position: fixed;
		      left: 0;
		      bottom: 0rpx;
		      height: 100rpx;
		      background: rgba(255, 200, 10, 1);
		      color: #fff;
		      font-size: 32rpx;
		      line-height: 100rpx;
			  text-align: center;
		      border-radius: 0;
		      &::after{
		          border: none;
		      }
		    }
		}
		.popup {
			position: relative;
			padding-bottom: 100rpx;
			width: 100%;
			background: #FFFFFF;
            .close{
				position: absolute;
				width:23rpx;
				height:23rpx;
				top: 50rpx;
				right: 40rpx;
			}
			.goods_info {
				display: flex;
				padding: 30rpx 30rpx 20rpx 30rpx;
				box-sizing: border-box;
				width: 100%;

				image {
					width: 170rpx;
					height: 170rpx
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: rgba(255, 200, 10, 1);
					font-size: 32rpx;
					margin-left: 18rpx;
					//padding-bottom: 50rpx;

					.goods_num {
						display: flex;
						flex-direction: column;
						font-size: 26rpx;
						color: rgba(153, 153, 153, 1);
						margin-top: 20rpx;
					}
				}
			}
			.scroll{
				max-height: 600rpx;
				// padding-bottom: 100rpx;
				.goods_size {
					padding: 0rpx 0rpx 0rpx 30rpx;
					box-sizing: border-box;
				
					.title {
						font-size: 32rpx;
						margin-left: 13rpx;
					}
				
					.size_item {
						display: flex;
						flex-wrap: wrap;
						// justify-content: space-;
						padding: 15rpx 0rpx 27rpx;
						font-size: 28rpx;
				
						.sel {
							width: 210rpx;
							// min-width: 210rpx;
							// padding: 0 30rpx;
							height: 64rpx;
							line-height: 64rpx;
							text-align: center;
							background: rgba(245, 245, 245, 1);
							border-radius: 32rpx;
							margin-right: 30rpx;
							margin-top: 12rpx;
							color: #FFFFFF;
							background: rgba(255, 200, 10, 1);
						}
				
						.nosel {
							width: 210rpx;
							// min-width: 210rpx;
							// padding: 0 30rpx;
							height: 64rpx;
							margin-right: 30rpx;
							line-height: 64rpx;
							text-align: center;
							background: rgba(245, 245, 245, 1);
							border-radius: 32rpx;
							margin-top: 12rpx;
				
							color: rgba(57, 72, 107, 0.8);
						}
					}
				}
				
			}
			
			.goods_num1{
				padding: 20rpx 30rpx 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size:32rpx;
				// .uni-numbox {
				// 	display: flex;
				// 	align-items: center;
				// 	height: 60rpx;
				// 	background: rgba(255, 255, 255, 1);
				// 	border: 1rpx solid rgba(60, 72, 104, 0.1);
				// 	border-radius: 32rpx;
				// 	overflow: hidden;
				// }
				.uni-numbox {  
					display: flex;  
					flex-direction: row;  
					justify-content: flex-start;  
					height: 64rpx;  
					border:1rpx solid rgba(60,72,104,0.1);
					border-radius:32rpx;
					overflow: hidden;
				}  
			
				.uni-numbox-minus,  
				.uni-numbox-plus {  
					margin: 0;  
					background-color: #f9f9f9;  
					width: 100rpx;  
					height: 100%;  
					line-height: 64rpx;  
					text-align: center;  
					color: #555555;  
				}  
			
				.uni-numbox-minus {  
					// border: 2rpx solid #cccccc;  
					// border-right: none;  
					// border-top-left-radius: 6rpx;  
					// border-bottom-left-radius: 6rpx;  
				}  
			
				.uni-numbox-plus {  
					// border: 2rpx solid #cccccc;  
					// border-left: none;  
					// border-top-right-radius: 6rpx;  
					// border-bottom-right-radius: 6rpx;  
				}  
			
				.uni-numbox-value {  
					// border: 1rpx solid #cccccc;  
					background-color: #ffffff;  
					width: 100rpx;  
					height: 100%; 
					 border-right: 1rpx rgba(60,72,104,0.06) solid;
					 border-left: 1rpx rgba(60,72,104,0.06) solid;
					text-align: center;  
				}  
			
				.uni-numbox-disabled {  
					color: #c0c0c0;  
				}  
			}
			.goods_bot{
				position: fixed;
				bottom: 0rpx;
				width:100%;
				height:100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size:32rpx;
				color: #FFFFFF;
				background:rgba(251,202,63,1);
			}
		}

		.bottom {
			position: fixed;
			justify-content: space-between;
			align-items: center;
			bottom: 0rpx;
			height: 150rpx;
			display: flex;
			width: 100%;
			background: #F0f0f0;

			.car {
				margin: 0 10rpx 0 10rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20rpx;
				padding-bottom: 50rpx;

				.carnum {
					position: absolute;
					right: 0rpx;
					width: 20rpx;
					height: 20rpx;
					line-height: 20rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 12rpx;
					background: rgba(#42bfca, 1);
					border-radius: 10rpx;
				}
			}

			.nocollect {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20rpx;

				image {
					width: 44rpx;
					margin-bottom: 5rpx;
				}
			}

			.collect {
				color: #FFC600;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20rpx;

				image {
					width: 44rpx;
					margin-bottom: 5rpx;
				}
			}

			.right {
				display: flex;

				.add {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					background: rgba(#ffcc00, 1);
					margin: 0rpx 10rpx 50rpx 10rpx;
					border: 2rpx #ffcc00 solid;
					border-radius: 32rpx;
				}

				.pay {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					background: #EB5938;
					margin: 0rpx 40rpx 50rpx 10rpx;
					border: 2rpx #EB5938 solid;
					border-radius: 32rpx;
				}
			}
		}

		.swiper-box {
			width: 100%;
			height: 750rpx;

			.swiper-item {
				width: 100%;

				image {
					width: 100%;
					height: 750rpx;
				}
			}
		}

		.info {
			box-sizing: border-box;
			padding: 41rpx 0rpx 20rpx 30rpx;
			border-bottom: 16rpx rgba(251, 251, 253, 1) solid;

			.top {
				position: relative;

				.pic {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					align-items: center;

					text:nth-child(1) {
						font-size: 40rpx;
						color: rgba(255, 198, 0, 1);
						margin-right: 10rpx;
					}

					text:nth-child(3) {
						font-size: 20rpx;
						color: rgba(57, 72, 107, 0.5);
						margin-left: 30rpx;
						text-decoration: line-through;
					}
				}

				.title {
					font-size: 32rpx;
					font-weight: bold;
					padding: 40rpx 0rpx;
				}
				.sketch {
					font-size: 30rpx;
					padding-bottom: 20rpx;
					color: #999;
				}
				.share {
					position: absolute;
					// display: flex;
					right: 30rpx;
					top: 0rpx;
					align-items: center;
					font-size: 28rpx;
					border: none;
					background: white;
				    display: flex;
					align-items: center;
					border: none;
					background: #FFFFFF;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.line {
			display: flex;
			padding: 47rpx 31rpx;
			justify-content: space-between;
			align-items: center;
			border-bottom: 16rpx #FBFBFD solid;

			.left {
				display: flex;
				font-size: 28rpx;
				align-items: center;

				text:last-child {
					margin-left: 30rpx;
					color: rgba(57, 72, 107, 0.3);
				}
			}

			.right {
				position: relative;
				font-size: 28rpx;
				color: rgba(57, 72, 107, 0.5);
				padding-right: 23rpx;
			}

			.right::before {
				position: absolute;
				right: 0rpx;
				top: -2rpx;
				content: '';
				border: 1rpx solid #CCCCCC;
				border-width: 0 1rpx 1rpx 0;
				padding: 6rpx;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
		}

		.content {
			position: relative;
			box-sizing: border-box;
			width: 100%;
			padding: 47rpx 10rpx;
			border-bottom: 16rpx rgba(251, 251, 253, 0.8) solid;

			.details {
				font-size: 28rpx;
				line-height: 60rpx;
				padding-top: 37rpx;
				
				width: 730rpx;
				
				::v-deep {
				    img,p,span {
				       width: 100%;
					   line-height: 60rpx;
				    }
				}
			}
			
			// .details >>> img,p,span {
			//   width: 100%;
			// }
			
			.content_title {
				position: relative;
				width: 130rpx;
				font-size: 24rpx;
				text-align: center;
				height: 24rpx;
				line-height: 24rpx;
			}

			.content_title::before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 6rpx;
				height: 24rpx;
				background: rgba(255, 198, 0, 1);
				border-radius: 2rpx;
			}
		}

		
		.newBtn{
			view{
				position: fixed;
				bottom: 0rpx;
				width:50%;
				height:100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size:32rpx;
				color: #FFFFFF;
				background:rgba(251,202,63,1);
			}
		}
	}
</style>
